<template>
  <div class="compare-preview" id="comparePreview">
    <h3>全局综述</h3>
    <el-table :data="globalCompare" :show-header="false">
      <el-table-column prop="vdoing"></el-table-column>
      <el-table-column>
        <template #default="{ row }">
          <div v-html="row.desc"></div>
        </template>
      </el-table-column>
    </el-table>
    <template v-if="isOptions">
      <h3>选项优劣势对比</h3>
      <el-table :data="optionCompare">
        <el-table-column prop="vdoing" label="对比维度"></el-table-column>
        <el-table-column v-for="item in tableHeader" min-width="1000" :prop="item" :label="item">
          <template #default="{ row }">
            <div v-html="row[item]"></div>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <media-viewer v-if="isPreviewImage" :urlList="[previewImage]" @close="closeViewer"></media-viewer>
  </div>
</template>

<script setup>
import { computed, nextTick, onMounted, ref } from "vue";

const props = defineProps({
  isOptions: Boolean,
  globalCompare: {
    type: Array,
    default: () => []
  },
  optionCompare: {
    type: Array,
    default: () => []
  }
});

const tableHeader = computed(() => {
  if (props.isOptions && props.optionCompare?.length) {
    const optionCompareItem = props.optionCompare[0];
    const optionCompareItemKeys = [];
    for (let key in optionCompareItem) {
      key !== "vdoing" && optionCompareItemKeys.push(key);
    }
    return optionCompareItemKeys;
  }
  return [];
});

onMounted(async () => {
  await nextTick();
  document.getElementById("comparePreview").onclick = function (e) {
    isPreviewImage.value = true;
    previewImage.value = e.target.src;
  };
});

const isPreviewImage = ref(false);
const previewImage = ref("");
const closeViewer = () => {
  isPreviewImage.value = false;
  previewImage.value = "";
};
</script>

<style scoped lang="scss">
.compare-preview {
}
</style>
